<template>
<div id="register">
	<div class="download_app" :class="{'download_app_state':downloadAppState}">
		<div class="mask"></div>
		<div class="download_tips">
			<div class="close" @touchstart="closeDownloadTips(true)"></div>
			<div class="tips">
				<p>壹键哥APP</p>
				<span>一个让你享受吃喝玩乐还能赚钱的APP</span>
			</div>
			<button class="download"  @click="openGft">立即下载</button>
      <open-app ref="openApp"></open-app>
		</div>
	</div>
	<div class="logo"></div>
	<div class="inviter">
		<p>邀请人GW号</p>
		<span>{{gw}}</span>
	</div>
	<div class="success_tips">
		<p>完成注册 加入壹键哥</p>
	</div>
	<div class="form">
		<div class="label">
			<input type="tel" placeholder="境外手机需+区号" v-model="mobile" v-verify="mobile" v-verify.mobile="mobile">
      <div class="help-block"  v-remind="mobile"></div>
		</div>
		<div class="label">
			<input type="tel" placeholder="请输入验证码" v-model="checkCode">
			<button @click="send">{{getCode}}</button>
      <div class="help-block" v-if="prompt_status">{{prompt}}</div>
		</div>
		<div class="label">
			<input type="password" placeholder="请输入6-12位密码，字母+数字组合" v-model="password" v-verify="password" >
      <div class="help-block" v-remind="password"></div>
		</div>
		<p>提交后，表示同意<a href="javascript: void(0)">《壹键哥用户注册协议》</a></p>
		<button class="submit" @click="beforeSubmit" >快速注册</button>
	</div>
	<p style="position: absolute; bottom:0.2rem;width:100%;text-align:center;">@2018版权所有 壹键哥</p>
  <loading v-show="showLoading"></loading>
  <msg-box ref="msgBox"></msg-box>
</div>


 <!-- <div class="wrap-register">
    <open-app ref="openApp"></open-app>
    <div class="wrap-register-bg">
        <img alt="背景图片" src="/static/images/register-bg.jpg"/>
    </div>
    <div class="wrap-register-headportrait">
        <img alt="头像" src="/static/images/register-headportrait.png"/>
    </div>
    <div class="wrap-register-gw" v-show="gw">
        <div>
            <p class="gw-invitepeople">邀请人GW号</p>
            <p class="gw-number">{{gw}}</p>
        </div>
    </div>
    <p class="wrap-register-text">完成注册 加入壹键哥</p>
    <ul>
        <li>
            <input type="text" name="phone-number" placeholder="输入手机号码" v-model="mobile" v-verify="mobile" v-verify.mobile="mobile"  />
             <div class="help-block"  v-remind="mobile"></div>
        </li>
        <li>
            <input type="text" name="verify-number" placeholder="获取验证码"  v-model="checkCode" class="inp-verificationcode"/>
            <button class="but-verificationcode" @click="send" >{{getCode}}</button>
            <div class="help-block" v-if="prompt_status">{{prompt}}</div>
        </li>
        <li>
            <input type="password" name="password" placeholder="输入密码"  v-model="password" v-verify="password"  />
            <div class="help-block" v-remind="password"></div>
        </li>
        <li><p style="text-align:center"><span style="color:#000">提交后，表示同意</span><a href="https://api.e-gatenet.cn/registerprotocol.htm"><span style="color:#E0C921">《壹键哥用户注册协议》</span></a></p></li>
        <li><p class="but-complete" id="register"  @click="beforeSubmit" >完成注册</p></li>
    </ul> -->
            <!-- 福利弹窗 -->
        <!-- <div class="mask" v-if="shareAlert"></div>
        <div class="share" v-if="shareAlert">
            <div class="close" @click.stop="shareAlert = false"></div>
            <div class="immediately_register">
                <p>
                    <span>送<s></s></span><span>您<s></s></span><span>一<s></s></span><span>波</span>
                </p>
                <h1>大福利</h1>
                <div class="voucher">
                    <p><img src="../assets/images/voucher.png" alt=""></p>
                    <div class="footer_mask">
                        <p><img src="../assets/images/footer_mask.png" alt=""></p>
                        <div class="register_btn" @click.stop="shareAlert = false">
                            <img src="../assets/images/registerbtn.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="immediately_share">
                <div class="explain">
                    <p>活动说明：</p>
                    <span>注册有机会随机获得<br/>[10元代金券] </span>
                    <p>&nbsp;</p>
                </div>
                
            </div>
        </div>

        <loading v-show="showLoading"></loading>
        <msg-box ref="msgBox"></msg-box>
    <p class="wrap-register-copyright">©2018 版权所有 壹键哥</p>
</div> -->

</template>

<script>
import Vue from "vue";
import loading from "./Loading";
import msgBox from "./MsgBox";
import "vue-layer-mobile/need/layer.css";
import layer from "vue-layer-mobile";
import openApp from "./OpenApp";

Vue.use(layer);
export default {
  name: "register",
  components: {
    loading,
    msgBox,
    openApp
  },
  data() {
    return {
      downloadAppState: false,
      checkStoreStatus: false,
      mobile: "",
      checkCode: "",
      password: "",
      getCode: "获取验证码",
      prompt_status: false,
      prompt: "",
      salesOutletInfo: {},
      registMethod: 2, //注册方式 １：普通注册 ２：个人扫码 ３：门店扫码
      deviceIdentity: "agent", //设备标识
      clientSource: 1, //设备系统类型 ，1=》网站
      wait: false, //倒计时等待
      showLoading: false,
      disable: false, //店铺信息不正确，不允许注册，发送短信,
      gw: this.$route.query.gw ? this.$route.query.gw : "", //商家gw
      publicKey: "", //公钥
      rsaRegister: "", //加密后的注册信息
      rsaLogin: "", //加密后的登录信息
      isWeixin: navigator.userAgent.toLowerCase().indexOf("micromessenger") > 0,
      shareAlert: parseInt(this.$route.query.shareType) === 1,
      salesOutletUID: this.$route.query.salesOutletUID
        ? this.$route.query.salesOutletUID
        : ""
    };
  },
  mounted(){
    this.$http.get('/api/getPublicKey').then(res=>{
      this.publicKey = res.body
    });
  },
  methods: {
    openGft(){
            this.$refs.openApp.openApp()
    },
    closeDownloadTips: function(state){
      this.downloadAppState = state
    },
    alert(msg) {
      this.$refs.msgBox.alert(msg);
    },
    tel(msg) {
      this.telPlaceholder = msg;
    },
    //发送手机验证码
    send() {
      //event.preventDefault();
      if (!this.$verify.check("mobile") || this.wait || this.disable)
        return false;
      this.showLoading = true;
      this.$http.post("/api/sms", { mobile: this.mobile }).then(
        res => {
          //返回数据格式{"isSuccess": 1,"code": "sample string 2","description": "sample string 3","resData": true}
          if (res.body.isSuccess == 1) {
            this.prompt = "发送成功";
            this.doSend = true;
          } else if (
            res.body.isSuccess == 0 &&
            res.body.description.indexOf("已注册") > -1
          ) {
            this.$layer
              .dialog({
                content: "手机号已注册请直接登陆",
                btn: ["打开壹键哥", "关闭"]
              })
              .then(res => {
                if (res === 0) {
                  this.$refs.openApp.openApp();
                }
              });
          } else {
            // this.prompt = "发送失败，请60s后重试"
            if(res.body.description){
                  this.alert(res.body.description)
              }else{
                  this.alert(res.body)
              }
          }
          this.showLoading = false;
        },
        res => {
          this.$layer.open({
            content: "请求异常，稍后重试",
            skin: "msg",
            time: 2000
          });
          this.showLoading = false;
        }
      );
      var seconds = 60,
        timer = null;
      this.getCode = seconds + "S";
      timer = setInterval(
        function() {
          seconds--;
          this.getCode = seconds + "S";
          this.wait = true;
          if (seconds <= 0) {
            clearInterval(timer);
            timer = null;
            this.getCode = "重新获取";
            this.wait = false;
          }
        }.bind(this),
        1000
      );
    },
    //注册完成后登录
    login(gwCode,tips) {
      this.$http.post("/api/login").then(
        res => {
          this.showLoading = false;
          if (res.data == "1000") {
            this.$layer.open({
              content: "注册成功",
              skin: "msg",
              time: 100
            });
            //console.log('注册成功后自动登录成功');
            setTimeout(() => {
              // this.$router.push({name: "RegisterResult"});
               this.$router.push({'name':'RegisterResult',query:{'gwCode': gwCode,'tips': tips}});
            }, 100);
            //跳转到商家订单页
          } else {
            this.$layer.open({
              content: "自动登陆失败",
              skin: "msg",
              time: 100
            });
          }
        },
        res => {
          this.$layer.open({
            content: "登陆接口异常稍后重试",
            skin: "msg",
            time: 100
          });
        }
      );
      return true;
    },
    //提交
    beforeSubmit() {
      //event.preventDefault();
      if (!this.$verify.check() || this.disable) {
        return false;
      } else {
        if (!this.doSend) {
          // this.prompt = "请获取手机验证码"
          this.alert("请获取手机验证码");
          return false;
        }
        //加密
        if (this.publicKey.length > 0) {
          let jse = new this.$jsEncrypt.JSEncrypt();
          jse.setPublicKey(this.publicKey);
          this.rsaLogin = "1\t" + this.mobile + "\t" + this.password + "\t";
          this.rsaRegister =
            this.mobile +
            "\t" +
            this.password +
            "\t" +
            this.checkCode +
            "\t" +
            this.gw +
            "\t" +
            this.registMethod +
            "\t" +
            this.salesOutletUID;
          this.rsaLogin = jse.encrypt(this.rsaLogin, this.publicKey);
          this.rsaRegister = jse.encrypt(this.rsaRegister, this.publicKey);
          //清空密码
          this.password = "";
         
        }
        this.deviceIdentity = navigator.userAgent;
        //提交表单
        const regInfo = {
          mobile: this.mobile,
          checkCode: this.checkCode,
          password: this.password,
          referralCode: this.gw,
          salesOutletUID: this.salesOutletUID,
          registMethod: this.registMethod,
          deviceIdentity: this.deviceIdentity,
          clientSource: this.clientSource,
          rsaRegister: this.rsaRegister,
          rsaLogin: this.rsaLogin
        };
        this.showLoading = true;
        this.$http.post("/api/register", regInfo).then(
          res => {
            //返回{"isSuccess": 1,"code": "sample string 2", "description": "sample string 3", "resData": "sample string 4"}
            if (res.body.isSuccess == 1) {
              //设置session
              this.login(res.body.resData.userCode,res.body.resData.tips);
              
            }
            if (res.body.isSuccess == 0) {
              if (res.body.description.indexOf("被使用") > 0) {
                this.$layer
                  .dialog({
                    content: "手机号已注册请直接登陆",
                    btn: ["打开壹键哥", "关闭"]
                  })
                  .then(res => {
                    if (res === 0) {
                      this.$refs.openApp.openApp();
                    }
                  });
              } else {
                //this.alert(res.body.description);
                this.$layer.open({
                  content: res.body.description,
                  skin: "msg",
                  time: 2000
                });
              }
              // console.log(res.body);
              this.showLoading = false;
            }
          },
          res => {
            this.$layer.open({
              content: "请求异常稍后重试",
              skin: "msg",
              time: 2000
            });
            this.showLoading = false;
          }
        );
      }
    }
  },
  verify: {
    mobile: ["required", "myMobile"],
    password: [
      "required",
      { minLength: 6, message: "密码不得小于6位" },
      { maxLength: 12, message: "密码不得大于12位" },
      "checkPassword"
    ]
  }
};
</script>

<style scoped>
@import "/static/css/register.css";
.wrap-register {
  background: #494a5f;
  font-weight: 500;
  font-size: 1.05em;
  font-family: "Microsoft YaHei", "Segoe UI", "Lucida Grande", Helvetica, Arial,
    sans-serif;
}
input::-webkit-input-placeholder {
  color: #999;
}
.help-block {
  color: red;
}
.wrap-register-copyright{
    height: 50px;
    line-height: 50px;
    margin-top:50px;
}
/* .mask{position: fixed;width:100%;height:100%;background:#000;opacity: .5;left:50%;top:0;transform: translateX(-50%);z-index: 2}
.share{position: fixed;width:7.3867rem;background:#FE1647;top:50%;left:50%;transform: translate(-50%,-50%);z-index: 3}
.close{position: absolute;top:0.16rem;right: 0.16rem;width:0.6rem;height:0.6rem;background:url('../assets/images/share_close.png') no-repeat;background-size: 100%;}
.immediately_register{padding-top: 1.6rem;text-align: center;color:#fff;background:#FD2E59;}
.immediately_register p{line-height: 0.6667rem;}
.immediately_register p>span{font-size: 0.6rem;}
.immediately_register p>span s{display:inline-block;width:0.24rem;height:0.3467rem;background: url('../assets/images/splitbar.png') no-repeat;background-size: 100%;margin: 0 0.2rem}
.immediately_register h1{font-size: 0.92rem;letter-spacing:0.8rem;text-align: center;padding-left: 0.8rem;font-weight: normal;}
.voucher{margin-top: 0.9333rem;height:4.64rem;position: relative;}
.voucher p{width:6.2133rem;height:auto;margin:0 auto;}
.footer_mask{position: absolute;bottom:0;width:100%;}
.footer_mask p{width:100%;height:2.8667rem;}
.register_btn{position:absolute;left:50%;bottom:0;width:2.2rem;height:2.2rem;transform: translateX(-50%);}
.immediately_share{padding:0 0.6rem;margin-top:0.2667rem;overflow: hidden;}
.explain{color:#F8A5B6;overflow: hidden;}
.explain p,.sharing_people span{float: left;width:31%;text-align: right;}
.explain span,.sharing_people input{float: left;width:68%;}
img{width:100%;height: 100%} */

/*页面顶部*/
#register{width:10.0rem;min-height:100%;background: url('../assets/images/newUserRegister/register_bg.png') #fff no-repeat;background-size: 10.0rem 8.2rem;margin: 0 auto;font: 0.32rem "SimHei";color:#C7C7C7;overflow: hidden;position: relative;}
.download_app{position: fixed;width:10.0rem;height:1.08rem;top:0;left:50%;z-index: 999;opacity: 1;transition: all .3s linear;transform: translateX(-50%);}
.download_app_state{opacity: 0;z-index: -1;}
.download_app .mask{width:100%;height:100%;background:#000;opacity: .4;}
.download_app .download_tips{padding: 0.2rem 0.24rem;position: absolute;top:0;left:0;width:100%;box-sizing: border-box;}
.download_app .download_tips .close{float:left;width:0.64rem;height:0.64rem;background:url('../assets/images/newUserRegister/close.png') no-repeat;background-size: 100% 100%;margin-top: 2px;}
.download_app .download_tips .tips{float: left;margin-left: 0.36rem;}
.download_tips .tips p{color:#fff;font-size: 0.2933rem;}
.download_tips .tips span{color:#CCCCCC;font-size: 0.24rem;}
.download{float:right;width:2.08rem;height:0.64rem;background:#00C2C0;border-radius: 0.32rem;color:#fff;margin-top: 2px;font-size: 0.32rem;}
.logo{position: absolute;width:100%;height:7.64rem;background:url('../assets/images/newUserRegister/logo.png') no-repeat;background-size: 100% 100%;}
.inviter{width:3.28rem;height:1.4rem;border:2px solid #28C6C4;border-radius: 0.16rem;background:#fff;margin:5.36rem auto 0;text-align: center;line-height: 0.56rem;font-size: 0.4rem;}
.inviter p{color:#595757;margin-top:0.16rem;}
.inviter span{color:#00C2C0;}

/*表单样式*/
.success_tips p{color:#00C2C0;font-size: 0.48rem;text-align: center;margin-top:1.08rem;}
.form{width:7.16rem;margin: 0.56rem auto 1.2rem;}
.form .label{position: relative;margin-top: 0.8rem;}
.form .label:first-child{margin-top:0;}
.form input{width:100%;height:0.96rem;padding-left: 0.24rem;border:2px solid #00C2C0;border-radius: 0.48rem;box-sizing: border-box;box-shadow: 0rem 0.0533rem 0.0533rem #D0CFCF;}
.label button{position: absolute;right:0;top:0;width:2.0rem;height:0.96rem;background:#28B9C9;color:#fff;line-height: 0.96rem;text-align: center;font-size: 0.32rem;border-top-right-radius: 0.48rem;border-bottom-right-radius: 0.48rem;}
.form p{text-align: center;margin-top:0.8rem;}
.form p a{color:#1ABACE;}
.form .submit{width:100%;height:0.96rem;font-size: 0.48rem;color:#fff;background:url('../assets/images/newUserRegister/submit_bg.png') no-repeat;background-size: 100% 100%;text-align: center;line-height: 0.96rem;margin: 0.12rem 0;}

</style>